<template>
    <div class="gwd">
        <shouye-title :tit="tit"></shouye-title>
        <div class="content">
            <div class="card" v-for="(item, index) in list" :key="item.id">
                <van-row>
                    <van-col span="3" class="checkbox">
                        <van-checkbox
                            v-model="ref[inde]"
                            @click.prevent="push(item, index, item.id)"
                        ></van-checkbox>
                        <!-- <input type="checkbox"  class="checkbox" @click.prevent="push(item,index,item.id)" /> -->
                    </van-col>
                    <van-col span="15" class="main">
                        <div class="pic">
                            <img
                                src="../../assets/shopcartimg/sf1.png"
                                alt=""
                            />
                        </div>
                        <div class="dis">
                            <div>{{ item.name }}</div>
                            <div class="red">{{ item.price }}</div>
                        </div>
                    </van-col>
                    <van-col span="6" class="num">
                        <span>－</span>
                        <span> {{ item.num }} </span>
                        <span>＋</span>
                    </van-col>
                </van-row>
            </div>
            <div class="blank"></div>
        </div>
        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>
import { getgwc } from "../../api/index";
require("../../assets/shopcartimg/sf1.png");
import shouyeTitle from "../../components/tit.vue";
export default {
    data() {
        return {
            tit: "购物车",
            checked: false,
            value: "",
            list: [],
            totalPrice: 0,
            orderlist: [],
            ref: [],
            total: 0,
            result: ["a", "b"],
        };
    },
    methods: {
        async init() {
            let obj = await getgwc({ userId: this.$store.state.userId });
            console.log(obj.data.data);
            this.list = obj.data.data;
            for (var i = 0; i < 3; i++) {
                this.ref[i] = true;
            }
        },
        push(item, index, id) {
            this.ref[index] = !this.ref[index];
            console.log(this.ref[index]);
            if (this.ref[index] == true) {
                this.orderlist.push(item);
            } else {
                this.orderlist.splice(
                    this.orderlist.findIndex((item) => item.id == id),
                    1
                );
            }
        },
        onSubmit() {},
    },
    components: {
        shouyeTitle,
    },
    created() {
        this.init();
    },
    mounted() {
        // for(let i = 0 ;i<this.list.length ; i++){
        //     this.ref[i] = i
        //     console.log(i);
        // }
    },
    computed: {
        // totalPrice() {
        //     // this.total = this.orderlist.reduce((cur, current) => cur + parseInt(this.list.price.substr(1)) * current.num, 0)
        //   return  this.orderlist.reduce((cur, current) => cur + parseInt(current.price.substr(1)) * current.num, 0)
        // },
    },
};
</script>

<style scoped lang='less'>
.content {
    width: 100%;
    min-height: 1209px;
    background-color: #efefef;
    padding-top: 20px;
    box-sizing: border-box;
}
.card {
    width: 710px;
    height: 190px;
    background-color: white;
    margin: auto;
    border-radius: 10px;
    margin-top: 20px;
}
.van-row {
    width: 100%;
    height: 190px;
    .van-checkbox {
        margin-top: 75px;
        margin-left: 25px;
    }
    .checkbox {
        line-height: 190px;
        input {
            margin-left: 20px;
            width: 20px;
            height: 20px;
        }
    }
    .main {
        height: 190px;
        overflow: hidden;
        div {
            float: left;
        }
        .pic {
            margin: 26px 0;
            img {
                width: 185px;
                height: 138px;
            }
        }
        .dis {
            margin: 63px 20px;
            font-size: 30px;
            div {
                width: 100%;
            }
        }
    }
    .num {
        margin-top: 108px;
        span {
            display: inline-block;
            margin-left: 10px;
        }
    }
}
.blank {
    height: 120px;
}
.red {
    color: red;
}
</style>